<!-- 
全部类名、ID名前缀必须加上: OrderList_
全部函数名必须加上: OrderList_Function_
-->
<style>
    .search-bar {
        margin-bottom: 15px;
        padding: 10px;
        background-color: #f2f2f2;
        border-radius: 4px;
    }
    .search-item {
        margin-right: 15px;
        display: inline-block;
    }
</style>
<style></style>

<div id="OrderListBody">
    <!-- 搜索区域 -->
    <div class="search-bar">
        <div class="search-item">
            <label class="layui-form-label">订单状态：</label>
            <div class="layui-input-inline">
                <select id="OrderList_statusSelect" class="layui-select">
                    <option value="">全部状态</option>
                    <option value="1">待接手</option>
                    <option value="2">代练中</option>
                    <option value="3">待验收</option>
                    <option value="4">撤销中</option>
                    <option value="5">已撤销</option>
                    <option value="6">仲裁中</option>
                    <option value="7">已仲裁</option>
                    <option value="8">锁定中</option>
                    <option value="9">已结算</option>
                    <option value="10">订单异常</option>
                    <option value="11">已取消</option>
                    <option value="12">待发布</option>
                </select>
            </div>
        </div>
        <div class="search-item">
            <label class="layui-form-label">关键词：</label>
            <div class="layui-input-inline">
                <input type="text" id="OrderList_keywordInput" placeholder="请输入订单名称或ID" class="layui-input">
            </div>
        </div>
        <div class="search-item">
            <button id="OrderList_searchBtn" class="layui-btn layui-btn-normal">搜索</button>
            <button id="OrderList_resetBtn" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <table class="layui-hide" id="OrderListTable"></table>
{% include "页面/订单管理/表格-自定义操作模板.html" %}
</div>





<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;
        window.BS_Layui_$ = $;
        window.BS_Layui_form = form;


        /**
         * 初始化订单表格
         */
        var orderTable = table.render({
            elem: '#OrderListTable',
            cols: [[ //标题栏
                { type: 'checkbox', fixed: 'left' },
                { field: 'order_id', title: 'ID', width: 50, sort: true },
                { field: 'order_name', title: '标题', width: 350 },
                { field: 'receiving_server', title: '区服', width: 100 },
                { field: 'receiving_price', title: '接收价格', width: 100 },
                { field: 'posting_price', title: '发布价格', width: 100, sort: true },
                { field: 'completed_profit', title: '完成利润', width: 120, "align": "center", sort: true },
                { field: 'uncompleted_profit', title: '未完成利润', width: 140, "align": "center", sort: true },
                {
                    field: 'status', title: '状态', width: 100, "align": "center", templet: (res) => {
                        var text = "";
                        switch (res.status.code) {
                            case 1:
                                text = "<span style='color: #4CAF50;'>待接手</span>";
                                break;
                            case 2:
                                text = "<span style='color: #2196F3;'>代练中</span>";
                                break;
                            case 3:
                                text = "<span style='color: #FF9800;'>待验收</span>";
                                break;
                            case 4:
                                text = "<span style='color: #9E9E9E;'>撤销中</span>";
                                break;
                            case 5:
                                text = "<span style='color: #F44336;'>已撤销</span>";
                                break;
                            case 6:
                                text = "<span style='color: #FFC107;'>仲裁中</span>";
                                break;
                            case 7:
                                text = "<span style='color: #FFC107;'>已仲裁</span>";
                                break;
                            case 8:
                                text = "<span style='color: #9E9E9E;'>锁定中</span>";
                                break;
                            case 9:
                                text = "<span style='color: #4CAF50;'>已结算</span>";
                                break;
                            case 10:
                                text = "<span style='color: #F44336;'>订单异常</span>";
                                break;
                            case 11:
                                text = "<span style='color: #F44336;'>已取消</span>";
                                break;
                            case 12:
                                text = "<span style='color: #FF9800;'>待发布</span>";
                                break;
                        }
                        return text;
                    }
                },
                { field: 'Action', title: '操作', width: 400, "fixed": "right", "align": "center", "toolbar": "#Order_templat-order-tool" },

            ]],
            url: '/api/order_v2/list/', // 直接使用layui的url属性
            method: 'GET',
            page: true, // 是否显示分页
            limits: [1, 10, 50, 100],
            limit: 10, // 每页默认显示的数量
            where: {
                // 初始化查询参数
                status: '',
                keyword: ''
            },
            // 解析后端返回的数据格式
            parseData: function (res) {
                return {
                    "code": res.code, // 解析接口状态
                    "msg": res.message, // 解析提示文本
                    "count": res.data.total, // 解析总条数
                    "data": res.data.list // 解析数据列表
                };
            }
        });
        
        /**
         * 刷新订单表格数据
         */
        function OrderList_Function_refreshTable() {
            // 获取搜索参数
            var status = $('#OrderList_statusSelect').val();
            var keyword = $('#OrderList_keywordInput').val();
            
            // 重新渲染表格并传递搜索参数
            orderTable.reload({
                where: {
                    status: status || '',
                    keyword: keyword || ''
                },
                page: {
                    curr: 1 // 重新从第1页开始
                }
            });
        }
        
        /**
         * 初始化搜索功能
         */
        function OrderList_Function_initSearch() {
            // 搜索按钮点击事件
            $('#OrderList_searchBtn').on('click', function() {
                OrderList_Function_refreshTable();
            });
            
            // 重置按钮点击事件
            $('#OrderList_resetBtn').on('click', function() {
                $('#OrderList_statusSelect').val('');
                $('#OrderList_keywordInput').val('');
                form.render('select'); // 重新渲染select
            });
            
            // 回车键触发搜索
            $('#OrderList_keywordInput').on('keydown', function(e) {
                if (e.keyCode === 13) {
                    OrderList_Function_refreshTable();
                }
            });
            
            // 初始化select3
            form.render('select');
        }
        
        // 初始化搜索功能
        OrderList_Function_initSearch();
        Order_Function_ZiDingYiCaoZuoMoBan(table, $);
        
        // 暴露刷新表格函数到全局，以便其他地方调用
        window.OrderList_Function_refreshTable = OrderList_Function_refreshTable;

    }); 
</script>